﻿@{
    Layout = "_LayoutH";
    @model Camera

}
<div id="app" v-cloak>
    <form class="form-horizontal" onsubmit="return false">
        <div class="box-body">
            <div class="form-group">
                <label class="col-sm-2 control-label">客户名称</label>
                <div class="col-sm-10">
                    <select v-model="ClientId" class="form-control" type="text" v-on:change="getDevice">
                        <option v-for="item in ClientList" v-bind:value="item.ClientId" v-text="item.ClientName" v-bind:selected="item.ClientId==ClientId"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">设备名称</label>
                <div class="col-sm-10">
                    <select v-model="DeviceId" class="form-control" type="text">
                        <option v-for="item in DeviceList" v-bind:value="item.DeviceId" v-text="item.DeviceName" v-bind:selected="item.DeviceId==DeviceId"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">摄像头名称</label>
                <div class="col-sm-10">
                    <input class="form-control" v-model="CameraName" type="text">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">AccessToken</label>
                <div class="col-sm-10">
                    <input class="form-control" v-model="AccessToken" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">视频地址</label>
                <div class="col-sm-10">
                    <input class="form-control" v-model="VideoURL" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">通道号</label>
                <div class="col-sm-10">
                    <input class="form-control" v-model="ChannelNo" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">图片抓取周期(min)</label>
                <div class="col-sm-10">
                    <input class="form-control" v-model="CaptureTime" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">备注</label>
                <div class="col-sm-10">
                    <textarea v-model="Remark" class="form-control" rows="3" placeholder="备注...100个字符以内"></textarea>
                    <p class="textarea-numberbar"><em class="textarea-length" v-cloak>{{count}}</em>/100</p>
                </div>
            </div>
        </div>
        <div class="box-footer">
            <div class="pull-right box-tools">
                @*<button class="btn btn-primary" type="button">保存</button>*@
                <input v-on:click="addL" class="btn btn-primary radius" type="submit" v-model="submit">
            </div>
        </div>
    </form>
</div>
@section scripts{
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                submit: "添加",
                CameraId: "@Model.CameraId",
                ClientId: "@Model.ClientId",
                DeviceId: "@Model.DeviceId",
                CameraName:'@Model.CameraName',
                AccessToken: "@Model.AccessToken",
                VideoURL: "@Model.VideoURL",
                ChannelNo: "@Model.ChannelNo",
                CaptureTime: "@Model.CaptureTime",
                Remark: "@Model.Remark",
                ClientList: [],
                DeviceList:[]
            },
            computed: {
                count: function () {
                    return this.strLength(this.Remark, false);
                }
            },
            mounted: function(){
                var _self = this;
                _self.$nextTick(function () {
                    if (_self.CameraId > 0) {

                        _self.submit = "修改";
                    }
                    _self.getClient();
                    _self.getDevice();
                    //_self.$refs.Remark.clientWidth = _self.$refs.CameraName.clientWidth;
                });
            },
            methods: {
                addL: function () {
                    var _self = this;
                    if (_self.CameraName.length <= 0) {
                        layer.msg("摄像头名称不能为空", { icon: 2 });
                        return false;
                    }
                    if (_self.AccessToken.length <= 0) {
                        layer.msg("AccessToken不能为空", { icon: 2 });
                        return false;
                    }
                    if (_self.VideoURL.length <= 0) {
                        layer.msg("视频地址不能为空", { icon: 2 });
                        return false;
                    }
                    if (_self.ChannelNo.length <= 0) {
                        layer.msg("通道号不能为空", { icon: 2 });
                        return false;
                    }
                    if (_self.CaptureTime.length <= 0) {
                        layer.msg("图片抓取周期不能为空", { icon: 2 });
                        return false;
                    }

                    var index = layer.load(1, {
                        shade: [0.1, '#fff'] //0.1透明度的白色背景
                    });

                    var data = {
                        id: _self.CameraId,
                        ClientId: _self.ClientId,
                        DeviceId: _self.DeviceId,
                        CameraName: _self.CameraName,
                        AccessToken: _self.AccessToken,
                        VideoURL: _self.VideoURL,
                        ChannelNo: _self.ChannelNo,
                        CaptureTime: _self.CaptureTime,
                        Remark: _self.Remark,
                    };
                    yui.$axiospostform('/Camera/AddOrUpdate', data)
                        .then(function (response) {
                            if (response.data.Item1 === 101) {
                                layer.tips(response.data.Item2, '..layui-layer-setwin', {
                                    tips: [1, '#3595CC'],
                                    time: 3000
                                });
                                layer.close(index);
                                parent.app.searchL();
                                return false;
                            }
                            if (response.data.Item1) {
                                layer.msg(response.data.Item2, { icon: 1, time: 1000 });
                                setTimeout(function () {
                                    yui.layer_close3();
                                }, 500);
                            } else {
                                layer.msg(response.data.Item2 || errorMsg, { icon: 5 });
                            }
                            layer.close(index);
                            parent.app.searchL();
                        })
                        .catch(function (error) {
                            layer.close(index);
                        });
                },
                getClient() {
                    let _self = this;
                    yui.$axiospostform('/Camera/GetClientList', "")
                        .then(function (response) {
                            let results = response.data;
                            console.log(results)
                            for (let i = 0; i < results.length; i++) {
                                _self.ClientList.push({ ClientId: results[i].clientId, ClientName: results[i].clientName });
                            }
                            console.log(_self.ClientList)
                        })
                        .catch(function (error) {
                            
                        });
                },
                getDevice() {
                    let _self = this;
                    let data = {
                        ClientId: _self.ClientId
                    }
                    _self.DeviceList = [];
                    yui.$axiospostform('/Camera/GetDeviceList', data)
                        .then(function (response) {
                            let results = response.data;
                            for (let i = 0; i < results.length; i++) {
                                _self.DeviceList.push({ DeviceId: results[i].deviceId, DeviceName: results[i].deviceName });
                            }
                        })
                        .catch(function (error) {

                        });
                }
            }
        });
    </script>
}
